<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8"></meta>
	<title>报警类型</title>
	<th:block layout:fragment="head-include"></th:block>
</head>
<body>
	<section layout:fragment="content" class="content">
		<div class="row">
		
		<!-- 新增 -->
		<div class="modal fade" id="alarmTypeModal" tabindex="-1" role="dialog" aria-labelledby="Login" aria-hidden="true">
			<div  class="modal-dialog">
				<div class="box box-primary">
					<div class="box-header with-border">
						<button type="button" class="close closePop" data-dismiss="modal" aria-label="Close">
    			                <span aria-hidden="true">&times;</span>
                			</button>
							<h4 class="body-title" id="titelTag" th:attr="save='增加',update='编辑'">Add</h4>
					</div>
					
					<div class="box-body">
						<form id="AlarmTypeForm" method="post" class="form-horizontal" th:action="@{save}" th:attr="save=@{save},update=@{update}" autocomplete="off">
							<input type="hidden" name="alarmTypeId"/>
							
							<div class="form-group">
								<label class="col-xs-3 control-label" th:text="警报编码">警报编码</label>
								<div class="col-xs-7">
									<input type="text" class="form-control" name="alarmCode" id="alarmCode" 
									th:attr="data-fv-regexp-message='警报编码不能为空'"/>
								</div>
							</div>
							<div class="form-group">
								<label class="col-xs-3 control-label" th:text="警报名称">警报名称</label>
								<div class="col-xs-7">
									<input type="text" class="form-control" name="alarmName" id="alarmName" 
									th:attr="data-fv-regexp-message='警报名称不能为空'"/>
								</div>
							</div>
							<div class="form-group">
								<label class="col-xs-3 control-label" th:text="警报等级">警报等级</label>
								<div class="col-xs-7">
									<select name="alarmLevel" class="form-control" id="alarmLevel">
										<option selected="selected" th:attr="value=1" >一级</option>
										<option th:attr="value=2">二级</option>
										<option th:attr="value=3">三级</option>
									</select>
								</div>
							</div>
							
							<div class="form-group">
								<div class="text-center">
									<button type="submit" class="btn btn-primary"  th:text="确认">ok</button>
									<button type="button" class="btn btn-default closePop" data-dismiss="modal" th:text="取消">Cancel</button>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
		
		<!-- 显示 -->
		<div class="col-md-12">
			<div class="box box-primary" >
			
				<div class="box-header with-border">
					<h3 class="box-title">报警类型</h3>
					<div class="box-tools">
					<!-- data-toggle="modal"，HTML5 自定义的 data 属性 data-toggle 用于打开模态窗口。
						data-target="" 绑定元素-->
						<button type="button" class="btn btn-primary btn-sm" id="popButton" data-toggle="modal" data-target="#alarmTypeModal">
							<i class="fa  fa-plus"></i>
							&nbsp;&nbsp;添加报警类型
						</button>
					</div>
				</div>
				
				<div class="box-body no-padding" >
					<table class="table table-striped table-bordered table-hover dataTable">
						<thead>
							<tr class="bg-light-blue disabled">	
								<th>
									序号
								</th>
								<th>
									警报编码
								</th>
								<th>
									警报名称
								</th>
								<th>
									警报等级
								</th>
								<th>
									操作
								</th>
							</tr>
						</thead>
						<tbody >
							<tr th:each="alarmType,iterStat : ${alarmTypes}">
								<td th:text="${iterStat.count}">0</td>
								<td th:text="${alarmType.alarmCode}"></td>
								<td th:text="${alarmType.alarmName}"></td>
								
							<!-- <td th:text="${alarmType.alarmLevel}==1?'一级':(${alarmType.alarmLevel}==2?'二级':'三级')"></td> -->
								<td th:text="一级" th:if="${alarmType.alarmLevel}==1"></td>
								<td th:text="二级" th:if="${alarmType.alarmLevel}==2"></td>
								<td th:text="三级" th:if="${alarmType.alarmLevel}==3"></td>
								<td>
									<a class="editOne btn btn-box-tool" th:title="编辑" th:attr="dataId=${alarmType.alarmTypeId}">
										<i class="fa fa-edit"></i>
									</a>
									<a class="delOne btn btn-box-tool" th:title="删除" th:attr="dataId=${alarmType.alarmTypeId}">
										<i class="fa fa-minus"></i>
									</a>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
		
		
		<!-- 删除 -->
			<!-- class="modal fade"表示模态框 
				tabIndex属性可以设置键盘中的TAB键在控件中的移动顺序,即焦点的顺序-->
			<div class="modal fade" tabindex="-1" role="dialog">
			  <div class="modal-dialog" role="document">
			    <div class="modal-content">
			      <div class="modal-header">
			        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
			        <h4 class="modal-title">Modal title</h4>
			      </div>
			      <div class="modal-body">
			        <p>One fine body&hellip;</p>
			      </div>
			      <div class="modal-footer">
			        <button type="button" class="btn btn-default" data-dismiss="modal">Clos7e</button>
			        <button type="button" class="btn btn-primary">Save changes</button>
			      </div>
			    </div><!-- /.modal-content -->
			  </div><!-- /.modal-dialog -->
			</div><!-- /.modal -->
	
	
		<!-- js -->
		<script th:inline="javascript">
	    function alarm(){
			$.ajax({
				url: "/alarmType/list/",
				type: 'POST',
				dataType: 'html',
				success:function(data){
					$("#orgList").html(data);
				},
				error:function(error){
					alert(error);
				}
			});
		}
		</script>
		<script th:inline="javascript">
		$('.datepicker').datepicker({
            language:  "zh-CN",  
            autoclose: true,

            startView: 0,  
            format: "yyyy-mm-dd",  
            clearBtn:false,  
            todayBtn:true 
		});
		
			$(function(){
				//列表界面点击删除
				$(".delOne").click(function() {
					var obj = $(this);
					
					winTip.confirmAndTitle("提示","确认要删除吗？", function(result){
						if(!result){
							return ;
						}
						var id = obj.attr("dataId");
						$.ajax({
							url: "alarmType/del/" + id,
							type: 'POST',
							async : false,
							success: function(result) {
								if(result.status == 200) {								
									//window.location.reload();
									alarm();
								} else {
									winTip.alert(result.message);
								}
							}
						});
					})
				})
				//列表界面点击编辑按钮编辑用户信息
					$(".editOne").click(function() {
						var obj = $(this);
						var id = obj.attr("dataId");
						$.ajax({
							url: "alarmType/get/" + id,
							type: 'POST',
							success: function(result) {
								if(result.status == 200) {
									var obj = result.data;
									//弹出添加框
									$("#popButton").click();
									$("#titelTag").text("编辑");
									
									$("#AlarmTypeForm input[name='alarmTypeId']").val(obj.alarmTypeId);
									$("#AlarmTypeForm input[name='alarmCode']").val(obj.alarmCode);
									$("#AlarmTypeForm input[name='alarmName']").val(obj.alarmName);
									$("#AlarmTypeForm select[name='alarmLevel']").val(obj.alarmLevel);
									var AlarmCode = document.getElementById("alarmCode");
									AlarmCode.readOnly=true;
								} else {
									winTip.alert(result.message);
								}
							}

						});
					})
				
				//添加，并信息初始化
				$("#popButton").click(function(){
					$("#titelTag").text($("#titelTag").attr("save"));
					var AlarmCode = document.getElementById("alarmCode");
					AlarmCode.readOnly=false;
					
					$("#AlarmTypeForm input[name='alarmTypeId']").val("");
					$("#AlarmTypeForm input[name='alarmCode']").val("");
					$("#AlarmTypeForm input[name='alarmName']").val("");
					$("#AlarmTypeForm select[name='alarmLevel']").val("");
				})
				
				$(".closePop").click(function() {

				})
				
				//验证并添加
				$("#AlarmTypeForm").bootstrapValidator({
					
		            message: 'This value is not valid',
		            feedbackIcons: {
		                valid: 'glyphicon glyphicon-ok',
		                invalid: 'glyphicon glyphicon-remove',
		                validating: 'glyphicon glyphicon-refresh'
		            },
		            fields: {
		            	alarmCode: {
		                    message: '警报编码验证失败',
		                    validators: {
		                        notEmpty: {
		                            message: '警报编码不能为空'
		                        },
		                        regexp: {
		                            regexp: /^[a-zA-Z0-9_]+$/,
		                            message: '警报编码只能包含大写、小写、数字和下划线'
		                        }
		                    }
		                },
		                alarmName:{
							validators: {
								notEmpty: {
									message: '警报名称不能为空'
								}
							}
						},
						alarmLevel:{
							validators: {
								notEmpty: {
									message: '请选择报警等级'
								}
							}
						},
		            }
		        }).on("success.form.bv" ,function(e){
  						e.preventDefault();
  						var $form = $(e.target);
					
  						var only = document.getElementById("alarmCode").readOnly;
  						//alert(only);
  						
  						// Use Ajax to submit form data
  						var nextUrl;
  						//if(only == false) {
						nextUrl = "/alarmType/" + $form.attr('save');
  						/*} else {
  							nextUrl = "/alarmType/" + $form.attr('update');
  						}*/
  						$.ajax({
  							url: nextUrl,
  							type: 'POST',
  							//async : false,
  							data: $form.serialize(),
  							success: function(result) {
  								if(result.status == 200) {
  									//winTip.alert([[#{opt.submitSuccess}]], function() {
  										
  										//window.location.reload();
  										$(".modal-backdrop").remove();
  										alarm();
  									//});
  								} else {
  									winTip.alert(result.message);
  								}
  							}

  						});        	
        		});
			});
		
		</script>
	</section>
</body>
</html>
